<template>
  <div class="confirm">
    <header>
      <van-sticky>
        <div class="top">
          <van-icon
            name="arrow-left"
            class="arrow"
            @click='goBack'
          />
          <span
            class="finish"
            @click="finish"
          >完成</span>
        </div>
      </van-sticky>
      <div class="logo">
        <div class="out">
          <van-image
            round
            width="5rem"
            height="5rem"
            fit="cover"
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577373562144&di=665729126b73455cf659e04a2fecc281&imgtype=0&src=http%3A%2F%2Fimg.25pp.com%2Fuploadfile%2Fapp%2Ficon%2F20170616%2F1497599519914349.jpg"
            class="imgBox"
          />
        </div>
        <p class="tip">{{tip}}</p>
        <p class="total">{{total}}元</p>
        <p class="msg">
          <span class="msg_l">
            <span class="title">付款信息</span>
            <span class="way">在线支付</span>
          </span>
          <span class="money">-{{all}}</span>
        </p>
        <p class="order">
          <span class="order_l">
            <span class="tit">订单信息</span>
            <span class="give">约{{deliveryTime}}分钟送达</span>
          </span>
          <span class="seller">{{name}}</span>
        </p>
      </div>
    </header>
    <section>
      <div class="con">
        <van-image
          width="23rem"
          height="23rem"
          fit="contain"
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577373317206&di=fb07a69fe39cc1bb9eb75a6564b4f657&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F6327bb0ed66e3b62292d0ee8b8afeb66fbe011d517edbc-S8msca_fw658"
          class="adv"
        />
      </div>
    </section>
    <van-popup
      v-model="show"
      position="bottom"
      :style="{ height: '50%' }"
      :close-on-click-overlay="flag"
      class="popup"
    >
      <p class="txt">请输入密码</p>
      <!-- 密码输入框 -->
      <van-password-input
        v-model="value"
        :info="info"
        :focused="showKeyboard"
        @focus="focus"
      />

      <!-- 数字键盘 -->
      <van-number-keyboard
        theme="custom"
        extra-key="."
        close-button-text="完成"
        :show="showKeyboard"
        @input="onInput"
        @delete="onDelete"
        @blur="showKeyboard = false"
        @close="over"
        class="num"
      >
      </van-number-keyboard>
    </van-popup>

  </div>
</template>
<script>
export default {
  data: () => ({
    id: 0,
    name: "",
    total: 0,
    all:0,
    deliveryPrice: 0,
    deliveryTime: 0,
    show: true,
    flag: false,
    value: "",
    showKeyboard: true,
    info: "密码为 6 位数字",
    tip: "待支付"
  }),
  created() {
    this.id = Number(this.$route.params.id);
   this.getTotal();
  },
  methods: {
    focus() {
      this.showKeyboard = true;
    },
    over() {
      if (this.value === "123456") {
        this.$Toast.success('密码输入正确');
        this.show = false;
        this.getSellerName();
        this.tip = "支付完成";
      } else {
        this.$Toast.fail('密码输入错误');
        this.info = "密码输入错误";
      }
    },
    onInput(key) {
      this.value = (this.value + key).slice(0, 6);
    },
    onDelete() {
      this.value = this.value.slice(0, this.value.length - 1);
    },
    goBack() {
      this.$router.push("/home");
    },
    finish() {
      this.$router.push("/order");
    },
    async getSellerName() {
      const {
        data: { status, sellers }
      } = await this.$axios.get("api/getdetail/seller");
      // console.log(sellers);
      sellers.forEach(item => {
        if (item.id === this.id) {
          this.name = item.seller.name;
          this.deliveryPrice = item.seller.deliveryPrice;
          this.deliveryTime = item.seller.deliveryTime;
          this.all = this.$store.getters.getTotal + this.deliveryPrice;
        }
      });
    },
    async getTotal() {
      const {
        data: { status, sellers }
      } = await this.$axios.get("api/getdetail/seller");
      // console.log(sellers);
      sellers.forEach(item => {
        if (item.id === this.id) {
          this.deliveryPrice = item.seller.deliveryPrice;
          this.total = this.$store.getters.getTotal + this.deliveryPrice;
        }
      });
    },
  }
};
</script>
<style lang="less" scoped>
.confirm {
  header {
    .top {
      height: 50px;
      background-color: #2395ff;
      box-sizing: border-box;
      padding: 0 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 18px;
      color: #fff;
      .arrow {
      }
      .finish {
      }
    }
    .logo {
      padding: 0 20px;
      .out {
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 20px 0 3px 0;
        box-sizing: border-box;
        .imgBox {
        }
      }

      .tip {
        text-align: center;
        font-size: 18px;
        color: #2395ff;
        margin: 2px 0;
      }
      .total {
        text-align: center;
        font-size: 25px;
        font-weight: 600;
        margin: 2px 0;
      }
      .msg {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        border-bottom: 1px solid #eee;
        padding: 10px 0;
        box-sizing: border-box;
        margin: 0;
        .msg_l {
          .title {
            color: #999;
            margin-right: 15px;
          }
          .way {
          }
        }
        .money {
        }
      }
      .order {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eee;
        padding: 10px 0;
        box-sizing: border-box;
        margin: 0;
        font-size: 14px;
        .order_l {
          .tit {
            color: #999;
            margin-right: 15px;
          }
          .give {
          }
        }
        .seller {
        }
      }
    }
  }
  section {
    .con {
      display: flex;
      justify-content: center;
      padding-top: 30px;
      .adv {
        img {
         
        }
      }
    }
  }
  .popup {
    .txt {
      text-align: center;
      font-size: 16px;
      color: #2395ff;
      .num {
      }
    }
  }
}
</style>